import React, { Component } from 'react';
import {
  View,Text,StyleSheet,ScrollView,Image,Dimensions,Modal,DeviceEventEmitter,
    Platform
} from 'react-native';
import * as DATA from '../data/data';
import pxToDp from '../common/comm';
import LoginDialog from './LoginDialog';
import RegDialog from './RegDialog';
import ForgetPwd from './ForgetPwd';

export default class Product extends Component {
  // 构造
  constructor(props) {
    super(props);
    // 初始状态

    this.state = {
      url:DATA.res+this.props.navigation.state.params.url,
      width:0,
      height:0,
        pid:this.props.navigation.state.params.pid,
        otherUrl:'',
        iid:'',
        loginkey:this.props.navigation.state.params.info.loginkey||null,
        isLoginDialog:false,
        isRegDialog:false,
        isForgetPwdDialog:false,
        isInfo:this.props.navigation.state.params.isInfo||false,
    };
  }

    componentWillUnMount(){
        DeviceEventEmitter.remove();
    }

    getIId(){
        let _that = this;
        let data2 = 'id='+this.state.pid;
        fetch(DATA.ITEM_URL,{
            method: "POST",
            headers:{'Content-Type': 'application/x-www-form-urlencoded' },
            body: data2
        })
            .then((response) => {       // 数据解析方式
                if (response.ok) {
                    return response.json();
                }
            })
            .then((responseData) => {       // 获取到的数据处理
                _that.setState({
                    otherUrl:responseData.list[1].link,
                    iid:responseData.list[1].id,
                    itemlist:responseData.list
                })

                _that.getUrls();
                console.log(this.state.itemlist.length);
            })
            .catch((error) => { // 错误处理
                //alert('获取数据失败!');
            })
            .done();
    }
    change(isLogin,isReg,isForget,userInfo){
        if(userInfo !== null){
            this.setState({
                isInfo:true,
                loginkey:userInfo.loginkey
            });
        }
        this.setState({
            isLoginDialog:isLogin,
            isRegDialog:isReg,
            isForgetPwdDialog:isForget,
        })
    }

  componentDidMount() {
    Image.getSize(this.state.url,(width, height)=>{
      this.setState({width,height});
    });

      DeviceEventEmitter.addListener('logout2', (info)=>{
          this.setState({
              isInfo:false
          });
      });

      DeviceEventEmitter.addListener('product', (info)=>{
          this.setState({
              loginkey:info.loginkey,
              isInfo:true
          })

      });

      this.getIId();
  }

    toWebview(){
        this.props.navigation.navigate('ProductWebview',{url:this.state.otherUrl});
        let _that = this;
        let data2 = 'loginkey='+this.state.loginkey+'&id='+this.state.iid;
        fetch(DATA.TIAOZHUAN_URL,{
            method: "POST",
            headers:{'Content-Type': 'application/x-www-form-urlencoded' },
            body: data2
        })
            .then((response) => {       // 数据解析方式
                if (response.ok) {
                    return response.json();
                }
            })
            .then((responseData) => {       // 获取到的数据处理
                DeviceEventEmitter.emit('tiaozhuan');
            })
            .catch((error) => { // 错误处理
                alert('获取数据失败!');
            })
            .done();
    }

    iShowLogin(){
        return this.state.isInfo?<Text
            style={styles.img}
            onPress={()=>{this.toWebview()}}
            >立即投资</Text>:<Text
            style={styles.img}
            onPress={() => {
                this.setState({
                  isLoginDialog:true
                })
          }}
        >注册/登录</Text>;
    }
  render() {
    return (
    <View>
        <ScrollView>
            {/*登录框*/}
            <Modal
                animationType='fade'            // 淡入淡出
                transparent={true}              // 透明
                visible={this.state.isLoginDialog}    // 根据isModal决定是否显示
                onRequestClose={() => {this.onRequestClose()}}  // android必须实现
            >
                <View style={login.modalViewStyle}>
                    <LoginDialog
                        isClose={this.state.isLoginDialog}
                        change = {this.change.bind(this)}
                    />
                </View>
            </Modal>
            {/*注册框*/}
            <Modal
                animationType='fade'            // 淡入淡出
                transparent={true}              // 透明
                visible={this.state.isRegDialog}    // 根据isModal决定是否显示
                onRequestClose={() => {this.onRequestClose()}}  // android必须实现
            >
                <View style={login.modalViewStyle}>
                    <RegDialog
                        isClose={this.state.isRegDialog}
                        change = {this.change.bind(this)}
                    />
                </View>
            </Modal>
            {/*忘记密码框*/}
            <Modal
                animationType='fade'            // 淡入淡出
                transparent={true}              // 透明
                visible={this.state.isForgetPwdDialog}    // 根据isModal决定是否显示
                onRequestClose={() => {this.onRequestClose()}}  // android必须实现
            >
                <View style={login.modalViewStyle}>
                    <ForgetPwd
                        isClose={this.state.isForgetPweDialog}
                        change = {this.change.bind(this)}
                    />
                </View>
            </Modal>
            <Image
                source={{uri:this.state.url}}
                style={{
              width:pxToDp(this.state.width),
              height:pxToDp(this.state.height)
          }}
            />
        </ScrollView>
        {this.iShowLogin()}
    </View>
    );
  }
}

const styles = StyleSheet.create({
    img:{
        width:pxToDp(500),
        height:pxToDp(100),
        position:'absolute',
        bottom:pxToDp(20),
        backgroundColor:DATA.BASE_COLOR,
        color:'#fff',
        fontSize:pxToDp(46),
        textAlign:'center',
        textAlignVertical:'center',
        borderRadius:pxToDp(20),
        paddingTop:Platform.OS === 'android'?null:pxToDp(25),
        borderColor:'#eee',
        marginLeft:pxToDp(70)
    }
});

const login = StyleSheet.create({
    modalViewStyle: {
    },
    hudViewStyle: {
    },
    hudTextStyle: {
    }
});
